import React, { FC, useState } from 'react'
import { Typography, Empty, Table, Tag, Spin } from 'antd'
import styles from '../common.module.scss'
import ListSearch from '../../../components/ListSearch'
import useLoadQuestionListData from '../../../hooks/useLoadQuestionListData'
import ListPage from '../../../components/ListPage'

const Trash: FC = () => {
    const { data = {}, loading } = useLoadQuestionListData({ isDeleted: true })
    const { list = [], total = 0 } = data
    const columns = [
        {
            title: '问卷名称',
            dataIndex: 'title'
        },
        {
            title: '是否发布',
            dataIndex: 'isPublished',
            render: (isPublished: boolean) => {
                return isPublished ? <Tag color='processing'>已发布</Tag> : <Tag>未发布</Tag>
            }
        },
        {
            title: '答卷',
            dataIndex: 'answerCount'
        },
        {
            title: '创建时间',
            dataIndex: 'createdAt'
        },
    ]
    const { Title } = Typography
    return <>
        {/* header部分 */}
        <div className={styles.header}>
            <div className={styles.left}>
                <Title level={3}>回收站</Title>
            </div>
            <div className={styles.right}>
                <ListSearch />
            </div>
        </div>
        {/* 列表部分 */}
        <div className={styles.container}>
            {loading && <div style={{ textAlign: 'center' }}>
                <Spin />
            </div>}
            {(!loading && list.length === 0) && <Empty description='暂无数据' />}
            {(!loading && list.length > 0) && <Table dataSource={list} columns={columns} pagination={false} rowKey={(row) => row._id} />}
        </div>
        <div className={styles.footer}>
            <ListPage total={total} />
        </div>
    </>
}

export default Trash